<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript"> (function() { var css = document.createElement('link'); css.href = 'https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css'; css.rel = 'stylesheet'; css.type = 'text/css'; document.getElementsByTagName('head')[0].appendChild(css); })(); </script>
    <link rel="stylesheet" href="{{ url_for('static', filename='css/app.css') }}">
    <link rel="stylesheet" href="{{ url_for('static', filename='css/theme.css') }}">
    <style>
         .btn-container {
  text-align: center; /* 将按钮及其内容水平居中对齐 */
}

    .btn {
      background: #eb94d0;
      background-image: -webkit-linear-gradient(top, #eb94d0, #2079b0);
      background-image: -moz-linear-gradient(top, #eb94d0, #2079b0);
      background-image: -ms-linear-gradient(top, #eb94d0, #2079b0);
      background-image: -o-linear-gradient(top, #eb94d0, #2079b0);
      background-image: linear-gradient(to bottom, #eb94d0, #2079b0);
      -webkit-border-radius: 28px;
      -moz-border-radius: 28px;
      border-radius: 28px;
      text-shadow: 3px 2px 1px #9daef5;
      -webkit-box-shadow: 6px 5px 24px #666666;
      -moz-box-shadow: 6px 5px 24px #666666;
      box-shadow: 6px 5px 24px #666666;
      font-family: Arial;
      color: #fafafa;
      font-size: 27px;
      padding: 5px;
      text-decoration: none;
    }
        html, body {
    background: rgb(20,20,20);
    text-align: center;
    height: 100%;
    overflow: auto;
}
.svg-wrapper {
  position: relative;
    display: inline-block;
  top: 50%;
  transform: translateY(-50%);
	  margin: 0 auto;
  width: 320px;
}
.svg-wrapper input.file-input {
  position: absolute; /* 绝对定位 */
  top: 0;
  left: 0;
  opacity: 0; /* 设置透明，不显示实际的输入框 */
  width: 100%;
  height: 100%;
  cursor: pointer; /* 使用指针光标以表明可以点击 */
  z-index: 1; /* 确保输入框位于 <svg> 上方 */
}
.shape {
  stroke-dasharray: 140 540;
  stroke-dashoffset: -474;
  stroke-width: 8px;
  fill: transparent;
  stroke: #19f6e8;
  border-bottom: 5px solid black;
  transition: stroke-width 1s, stroke-dashoffset 1s, stroke-dasharray 1s;
}
.text {
  font-family: 'Roboto Condensed';
  font-size: 22px;
  line-height: 32px;
  letter-spacing: 8px;
  color: #fff;
  top: -48px;
  position: relative;
}
.svg-wrapper:hover .shape {
  stroke-width: 2px;
  stroke-dashoffset: 0;
  stroke-dasharray: 760;
}
.container_all {
  height: 200px; /* 设置容器的高度 */
  overflow-y: scroll; /* 添加垂直滚动条 */
}
    </style>
    <form method="POST" action="/ai/" ENCTYPE="multipart/form-data">
        <div class="svg-wrapper">
            <svg height="60" width="320" xmlns="http://www.w3.org/2000/svg">
                <rect class="shape" height="60" width="320"></rect>
                <div class="text">上传文件</div>
            </svg>
            <input type="file" class="file-input" name="photo">
        </div>
        <div class="btn-container">
            <input class="btn" type="submit" value="立即上传">
        </div>
    </form>
</head>
<body>

{% if file_path %}
    <class class="container_all">
    <main role="main">
    <section class="bg-gray200 pt-5 pb-5">
    <div class="container">
    	<div class="row justify-content-center">
    		<div class="col-md-7">
    			<article class="card">
    			<img class="card-img-top mb-2" src="{{ url_for('static', filename=file_path) }}" alt="Uploaded Photo">
    			<div class="card-body">
    				<ul>
    					<li>{{ "ai识别结果："+data }}</li>
                        </li>
    				</ul>
    			</div>
    			</article>
    		</div>
    	</div>
    </div>
    </section>
    </main>
    <script src="{{ url_for('static', filename='js/app.js') }}"></script>
    <script src="{{ url_for('static', filename='js/theme.js') }}"></script>
    <footer class="footer pt-5 pb-5 text-center">
    <div class="container">
          <p>©  <span class="credits font-weight-bold">
            <a target="_blank" class="text-dark" href="https://www.wowthemes.net/pintereso-free-html-bootstrap-template/"><u>Pintereso Bootstrap HTML Template</u> by WowThemes.net.</a>
          </span>
          </p>
    </div>
    </footer>
    </class>
{% endif %}

</body>
</html>